<div class="layuimini-main">

    <div class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label">上级分类</label>
            <div class="layui-input-block">
                <label>
                    <select name="pid" lay-filter="pid">
                        <option value='0'>顶级菜单</option>
                        @foreach($data['parent'] as $v)
                            <option value="{{ $v['id'] }}">{{ $v['title'] }}</option>
                            @if(!empty($v['child']))
                                @foreach($v['child'] as $vv )
                                    <option value="{{ $vv['id'] }}"><span>|----</span>{{ $vv['title'] }}</option>
                                @endforeach
                            @endif
                        @endforeach
                    </select>
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">名称</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="required" lay-reqtext="名称不能为空" placeholder="请输入菜单名称" value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="" class="layui-form-label">选择图标</label>
            <div class="layui-input-block">
                <input type="text" name="icon" value="fa fa-window-maximize" id="iconPicker" lay-filter="iconPicker" class="hide">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">链接</label>
            <div class="layui-input-block">
                <input type="text" name="href" placeholder="请输入链接" value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">target</label>
            <div class="layui-input-block">
                <input type="text" name="target" placeholder="打开方式" value="_self" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="number" name="sort" placeholder="请输入1-100数字" value="1" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">侧边菜单</label>
            <div class="layui-input-block">
                <input type="radio" name="is_menu" value="1" title="是" checked="">
                <input type="radio" name="is_menu" value="0" title="否">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注信息</label>
            <div class="layui-input-block">
                <textarea name="remark" class="layui-textarea" placeholder="请输入备注信息"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form','iconPickerFa'], function () {
        var form = layui.form,
            layer = layui.layer,
            iconPickerFa = layui.iconPickerFa,
            $ = layui.$;

        // icon选择器
        iconPickerFa.render({
            // 选择器，推荐使用input
            elem: '#iconPicker',
            // fa 图标接口
            url: "lib/font-awesome-4.7.0/less/variables.less",
            // 是否开启搜索：true/false，默认true
            search: true,
            // 是否开启分页：true/false，默认true
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 点击回调
            click: function (data) {
                console.log(data);
            },
            // 渲染成功后的回调
            success: function (d) {
                console.log(d);
            }
        });

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            data.field.href = 'content/' + data.field.href
            $.ajax({
                url: 'menu',
                method: 'post',
                data: data.field,
                success: function (res) {
                    if (res.code === 0){
                        layer.msg('保存成功',{icon:1},function () {
                            // 关闭弹出层
                            layer.close(parentIndex);
                            location.reload();
                        })
                    } else{
                        layer.msg( res.msg, {icon: 5})
                    }
                },
                error:function (res) {
                    layer.msg( '请求错误', {icon: 5})
                }
            });
            return false;
        });
    });
</script>
